<!--
 * @Author: Charsen
 * @Date: 2025-07-25 10:12
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-28 11:28:20
 * @Description: 
-->
<template>
  <Content>
    <div class="flex-y-center mb-20px justify-between">
      <SearchFormer
        :data="searchFormer.data"
        :fields="searchFormer.fields"
        @on-confirm="handleSearchChange"
      />
      <div>
        <OptionAdd v-action="actions.add" @on-add="showCreator" />
      </div>
    </div>

    <el-timeline v-loading="listLoading">
      <el-col v-if="list.length === 0 && !listLoading" class="w-full text-center">
        <el-empty description="暂无数据" />
      </el-col>
      <el-timeline-item
        v-for="(log, index) in list"
        v-else
        :key="index"
        :color="log.color"
        :icon="log.icon"
        :size="log.size"
        :timestamp="log.timestamp"
        :type="log.type"
        placement="top"
      >
        <el-card class="timeline-item">
          <h2>
            <span>#</span>
            {{ log.title }}
          </h2>
          <Options
            :id="log.id"
            :actions="actions"
            :index="index"
            :options="log.options"
            class="options"
            @on-edit="showEditor"
            @on-del="handleDestroy"
          />
          <div class="py-20px" v-html="log.content"></div>
          <div class="color-info py-20px">
            <ListTimer :created="log.created_at" :updated="log.human_time" />
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>

    <el-row class="pl-60px">
      <Pagination
        v-model:limit="pageFormer.page_limit"
        v-model:page="pageFormer.page"
        :total="pageFormer.total"
        @on-change="loadData"
      />
    </el-row>

    <Creator
      v-model:visible="createDialog.visible"
      :entity="createDialog.entity"
      :form-size="createDialog.size"
      @on-stored="loadData"
    />

    <Editor
      v-model:visible="editDialog.visible"
      :entity-id="editDialog.id"
      :form-size="editDialog.size"
      :entity="editDialog.entity"
      @on-updated="loadData"
    />
  </Content>
</template>

<script setup lang="ts">
  import { useCreator } from '#/hooks/useCreator'
  import { useDestroy } from '#/hooks/useDestroy'
  import { useEditor } from '#/hooks/useEditor'
  import { useLister } from '#/hooks/useLister'
  import { getActions } from '#/utils/auth'

  defineOptions({
    name: `${entity}Index`,
  })
  const entity = 'Timeline'
  const actions = getActions('platform-timeline')

  const { list, listLoading, searchFormer, pageFormer, handleSearchChange, fetchData } = useLister({
    entity,
  })

  const { handleDestroy } = useDestroy({ entity, list })
  const { createDialog, showCreator } = useCreator({ entity, formSize: 'large' })
  const { editDialog, showEditor } = useEditor({ entity, formSize: 'large' })

  const types = ref(['', 'info', 'primary', 'success', 'danger'])
  const icons = ref(['', '', 'el-icon-star-off', 'el-icon-guide', 'el-icon-question'])

  const loadData = () => {
    fetchData((res: any) => {
      const timelines: [] = []
      let index = 0
      res.data.forEach((item: any) => {
        const tmp = {
          id: item.id,
          index: index++,
          title: item.timeline_title,
          medias: item.content_medias,
          content: item.timeline_content,
          human_time: item.human_time,
          created_at: item.created_at,
          timestamp: item.happened_at,
          size: item.timeline_type === 1 ? 'normal' : 'large',
          type: types.value[item.timeline_type],
          icon: icons.value[item.timeline_type],
          options: item.options,
        }
        timelines.push(tmp)
      })
      // console.log(timelines)
      list.value = timelines
    })
  }

  onMounted(() => {
    loadData()
  })
</script>

<style lang="scss" scoped>
  .options {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #c0c4cc;
  }

  .timeline-item {
    position: relative;
    padding: 0 10px;

    h2 {
      padding-bottom: 15px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ebeef5;
    }

    h2 span {
      margin-right: 7px;
      color: #409eff;
    }
  }
</style>
